<template>
  <el-container class="panel-block">
    <el-header class="sa-header sa-p-t-20">
      <el-input v-model="state.filter.data.keyword" placeholder="请输入关键字" clearable>
        <template #append>
          <el-icon class="cursor-pointer" @click="onChangeFilter">
            <search></search>
          </el-icon>
        </template>
      </el-input>
    </el-header>
    <el-main>
      <el-table height="100%" class="sa-table" :data="state.data" stripe>
        <el-table-column width="48" align="center">
          <template #header="scope">
            <el-checkbox
              :model-value="state.isSelectAll"
              :indeterminate="state.isIndeterminate"
              @change="onSelectAll"
            >
            </el-checkbox>
          </template>
          <template #default="scope">
            <el-checkbox
              :model-value="state.ids.includes(scope.row.id)"
              @change="onSelect($event, scope.row)"
            >
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="90" sortable="custom"> </el-table-column>
        <el-table-column label="用户信息" min-width="150">
          <template #default="scope">
            <sa-user-profile :user="scope.row" :id="scope.row.id"></sa-user-profile>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" min-width="120"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column
          sortable="custom"
          prop="commission"
          label="佣金"
          min-width="110"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="total_consume"
          label="总消费"
          min-width="110"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="score"
          label="积分"
          min-width="110"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="money"
          label="余额"
          min-width="110"
        ></el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-footer--submit sa-flex sa-row-between sa-flex-wrap">
      <sa-pagination :pageData="pageData" @updateFn="getData" />
      <el-button type="primary" :disabled="state.ids.length == 0" @click="onConfirm"
        >确定</el-button
      >
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'GoodsSelect',
  };
</script>

<script setup>
  import { onMounted, reactive } from 'vue';
  import userApi from '@/app/user/api';
  import { usePagination } from '@/sheep/hooks';
  import { composeFilter } from '@/sheep/utils';
  import { api as couponApi } from '@/app/shop/admin/coupon/coupon.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const { pageData } = usePagination();

  const state = reactive({
    filter: {
      drawer: false,
      data: {
        keyword: '',
      },
      tools: {},
      condition: {},
    },
    data: [],

    ids: [],
    isSelectAll: false,
    isIndeterminate: false,
  });

  async function getData() {
    let tempSearch = JSON.parse(JSON.stringify(state.filter.data));
    let search = composeFilter(tempSearch, {
      keyword: 'like',
    });

    const { error, data } = await userApi.select({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });

    state.data = data.data;
    pageData.total = data.total;

    calculateSelect();
  }

  function onChangeFilter() {
    pageData.page = 1;
    getData();
  }

  function onSelect(type, row) {
    if (type) {
      state.ids.push(row.id);
    } else {
      let findIndex = state.ids.findIndex((id) => id == row.id);
      state.ids.splice(findIndex, 1);
    }
    calculateSelect();
  }
  function onSelectAll(type) {
    if (type) {
      state.data.forEach((item) => {
        state.ids.push(item.id);
      });
      state.ids = Array.from(new Set(state.ids));
    } else {
      state.data.forEach((item) => {
        if (state.ids.findIndex((id) => id == item.id) !== -1) {
          state.ids.splice(
            state.ids.findIndex((id) => id == item.id),
            1,
          );
        }
      });
    }
    calculateSelect();
  }
  function calculateSelect() {
    state.isSelectAll = false;
    state.isIndeterminate = false;
    if (state.data.every((item) => state.ids.includes(item.id))) {
      state.isSelectAll = true;
      state.isIndeterminate = false;
    } else if (state.data.some((item) => state.ids.includes(item.id))) {
      state.isSelectAll = false;
      state.isIndeterminate = true;
    }

    if (state.data.length === 0) {
      state.isSelectAll = false;
      state.isIndeterminate = false;
    }
  }

  async function onConfirm() {
    const { error, data } = await couponApi.send(props.modal.params.id, {
      user_ids: state.ids,
    });
    if (error === 0) {
      setTimeout(() => {
        emit('modalCallBack', { event: 'confirm' });
      }, 500);
    }
  }

  onMounted(() => {
    getData();
  });
</script>
